/**
 * @功能描述: 属性面板demo
 * @author: lzn
 * @date: 2022-09-29 09:10:14
 * @version: 1.0
 */
<script setup>
</script>

<template>
  <div class="yw-collapse yw-collapse-icon-end yw-collapse-ghost">
    <div class="yw-collapse-item collapse-item-active">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 1</span>
      </div>
      <div class="yw-collapse-content">
        <div class="yw-base-form yw-edit-panel">
          <div class="yw-row">
            <div class="yw-col yw-col-12">
              <div class="yw-form-item">
                <div class="yw-row">
                  <div class="yw-col yw-col-6 yw-form-item-label">
                    <label class="item-required" title="input" for="input">标签</label>
                  </div>
                  <div class="yw-col yw-col-18 yw-form-item-control">
                    <div class="form-item-content">
                      <input class="yw-input status-error" id="title" value="123" readonly />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="yw-col yw-col-12">
              <div class="yw-form-item">
                <div class="yw-row">
                  <div class="yw-col yw-col-6 yw-form-item-label">
                    <label title="Select" for="select">组件名</label>
                  </div>
                  <div class="yw-col yw-col-18 yw-form-item-control">
                    <div class="form-item-content">
                      <input class="yw-input status-error" id="title" value="propertyPanel" readonly />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yw-row">
            <div class="yw-col yw-col-12">
              <div class="yw-form-item">
                <div class="yw-row">
                  <div class="yw-col yw-col-6 yw-form-item-label">
                    <label class="item-required" title="input" for="title">标题</label>
                  </div>
                  <div class="yw-col yw-col-18 yw-form-item-control">
                    <div class="form-item-content">
                      <input class="yw-input status-error" id="title" value="title" readonly />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="yw-col yw-col-12">
              <div class="yw-form-item">
                <div class="yw-row">
                  <div class="yw-col yw-col-6 yw-form-item-label">
                    <label title="唯一标识" for="id">唯一标识</label>
                  </div>
                  <div class="yw-col yw-col-18 yw-form-item-control">
                    <div class="form-item-content">
                      <input class="yw-input" id="id" value="property" readonly />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yw-collapse-item">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon collapse-icon-unexpand">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 2</span>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>